<template>
	<view class="container">			
		<view>
			<map class="mapV" :style="{'height':windowHeight}" @tap="getPos"  :latitude="infoDict.lat" :longitude="infoDict.lon"  scale='14' :circles="circles" :markers="markers"
			                show-location=false>
			            </map>
		</view>
		<button class="btnview" @tap="goSignIn">打卡</button>
	
		
	</view>
</template>

<script>
	
	import Api from '@/common/api';
	export default {
		
		data() {
			return {
					windowHeight:'520rpx',
					// latitude: '29.54098',
					// longitude: '106.45773',
					markers2: [
						{
						    id: 1,
						    latitude: '29.54098',
						    longitude: '106.45773',
						    width: 10,
						    height: 17,
						    // iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
						    callout: {
						        content: '打卡范围',
						        color: '#FFFFFF',
						        fontSize: 12,
						        borderColor: '#69BFBE',
						        bgColor: '#69BFBE',
						        padding: 5,
						        borderRadius: 3,
						        display: 'ALWAYS',
						        textAlign: 'center',
						      }
						  }
						
					],
	
					// 目标经纬度信息
					infoDict: {
						'lon': '106.45773',
						'lat': '29.54098'
					},
	
					// 我的定位经纬度信息
					myPinInfo: {},
	
					// 默认距离为负数
					distance: -9999,
					distanceStr: '',
					circles2:[{
						latitude: '29.54098',
						longitude: '106.45773',
						color: '#69BFBE6A',
						fillColor: '#69BFBE6A',
						radius: 100,
						strokeWidth: 2,
					  }],
					circles:[],
					markers:[]
			};
		},
		
		onLoad() {
			this.loadPouchCardPoint();
			uni.getSystemInfo({
			    success: (res) => {
			        this.windowHeight = res.windowHeight+"px";
			} })
			
		},
		beforeCreate(){
				
		},
		beforeDestroy(){
			
			
		},

		onShow(){
			// 获取当前位置
			this.getlocation();
		},
		onReady(){
			
		},
		onPageScroll(e){
			
		},
		methods: {
			
			getlocation() {
			
				let myThis = this;
				console.log('获取位置开始');
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						myThis.myPinInfo = res;
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);

						// myThis.covers = [
						// 	{
						// 		latitude: myThis.myPinInfo.latitude,
						// 		longitude: myThis.myPinInfo.longitude,
						// 		width: 30,
						// 		height: 30,
						// 		id: 20001,
						// 		// iconPath: '../../static/people_pin.png'
						// 	}
						// ];
						myThis.distance = myThis.getDistance(myThis.infoDict.lat, myThis.infoDict.lon, myThis
							.myPinInfo.latitude, myThis.myPinInfo.longitude)
						myThis.distanceStr = '(当前距离' + myThis.distance + '米)'+res.latitude+','+res.longitude;

					}
				});
			},
			// 计算两点距离
			getDistance(lat1, lng1, lat2, lng2) {
				let EARTH_RADIUS = 6378.137;
				let radLat1 = this.rad(lat1);
				let radLat2 = this.rad(lat2);
				let a = radLat1 - radLat2;
				let b = this.rad(lng1) - this.rad(lng2);
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(b / 2), 2)));
				s = s * EARTH_RADIUS;
				//s = Math.round(s * 10000d) / 10000d;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000; //乘以1000是换算成米
				return s;
			},
			// 弧度计算
			rad(d) {
				return d * Math.PI / 180.0;
			},
			 // 立即签到
			goSignIn(e) {
				this.getlocation();
				uni.showModal({
								title: '温馨提示,'+'距离目的地'+this.distance+'米',
								content: '经度'+this.myPinInfo.longitude+',纬度'+this.myPinInfo.latitude+'目标经度'+this.infoDict.lon+',纬度'+this.infoDict.lat,
								showCancel: false
							})
			},
			getPos(event){
				console.log('只执行全局点击事件',event)
				this.myPinInfo.longitude=event.detail.longitude;
				this.myPinInfo.latitude=event.detail.latitude;
			},
			//加载打卡地点及范围
			async loadPouchCardPoint(){
				let data = await Api.apiCall('get',Api.apiName.pouch_card_point);
				if(data.data){
					let res = data.data;
					this.infoDict.lon=res.marker[0].longitude
					this.infoDict.lat=res.marker[0].latitude
					this.markers=res.marker;
					this.circles=res.circle;
				}
				
			},
			
		},
	

	}
</script>

<style lang="scss">	

	page {
		background: #f5f5f5;
		
	}

	.mapV {
	
	        width: calc(100vw);
	        height: 520px;
	        
	    }
	.btnview {
			display: flex;
			background-color: #FF731E;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			width: 400rpx;
			height: 50px;
			position: fixed;
			left: 20rpx;
			right: 20rpx;
			bottom: 30rpx;
		}
	
</style>
